<template>
	<div id="user">
		<!--  弹窗按钮  -->
		<div class="button">
			<el-button size="mini" type="primary" @click="handleAdd">添加用户信息</el-button>
		</div>
		<!--  Table表格  -->
		<el-table :data="tableData" style="width:  100%"
			:header-cell-style="{ background: '#2a9fc9', color: '#000000' }">
			<el-table-column align="center" label="用户id" prop="id"></el-table-column>
			<el-table-column align="center" label="用户名" prop="name"></el-table-column>
			<!-- <el-table-column align="center" label="头像" prop="headPhoto"></el-table-column> -->
			<el-table-column prop="headPhoto" label="头像" width="width" align="center">
				<template slot-scope="scope">
					<img :src="scope.row.headPhoto" alt="" style="height: 100px" />
					</template>
			</el-table-column>
			<el-table-column align="center" label="用户状态" prop="state">
				<template slot-scope="scope">
					<el-switch v-model="scope.row.state" active-color="#13ce66" inactive-color="#ff4949"
						:active-value="true" :inactive-value="false">
					</el-switch>
				</template>
			</el-table-column>
			<el-table-column align="center" label="身份证号" prop="idCard"></el-table-column>
			<el-table-column align="center" label="手机号" prop="phone"></el-table-column>
			<el-table-column align="center" label="会员状态" prop="vip">
				<template slot-scope="scope">
					<span v-if="scope.row.vip" >会员</span>
					<span v-else>普通用户</span>
				</template>
			</el-table-column>
			<el-table-column align="center" label="账户余额" prop="userMoney"></el-table-column>
			<el-table-column align="center" label="操作" style="width:30px">
				<template slot-scope="scope">
					<el-button size="mini" type="danger" circle icon="el-icon-delete" @click="handleDel(scope.row)">
					</el-button>
					<el-button type="primary" size="mini" circle icon="el-icon-edit" @click="handleEdit(scope.row)">
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		<add :dialogUser="dialogUser" :forms="form" ></add>
		<editor :dialogeditUser="dialogeditUser" :row="items"></editor>
	</div>
</template>

<script>
	import add from "./add.vue"
	import editor from "./editor.vue"
	import axios from 'axios';
	axios.defaults.baseURL = '/api'

	export default {
		components:{add,editor},
		data() {
			return {
				datalist:{},
				items:{
					id: "",
					name: "",
					state: '',
					idCard: "",
					phone: "",
					vip: '',
					userMoney: "",
					headPhoto: ""
				},
				dialogUser: false,
				dialogeditUser: false,
				tableData: [],
				form: {
					id: "",
					name: "",
					state: '',
					idCard: "",
					phone: "",
					vip: '',
					userMoney: "",
					headPhoto: ""
				},
				
			}
		},

		methods: {
			handleAdd() {
				console.log(11)
				this.dialogUser = true;
			},
			getLesson() {
				axios.get("http://123.57.174.220:8085/UserAll", ).then((res) => {
					console.log(res);
					if (res.status === 200) {
						this.tableData = res.data;
					}
				});
				
			},
			handleDel(row) {
				axios.delete(`http://123.57.174.220:8085/deleteUser/${row.id}`).then((res) => {
					console.log(res);
					if (res.status === 200) {
						this.getLesson()
					}
				});
			},
			handleEdit(row) {
				// console.log("555",row)
				// let {createTime,headPhoto,id,idCard,name,phone,state,userMoney,vip}=row
				// this.items.id = id
				// this.items.createTime = createTime
				// this.items.headPhoto = headPhoto
				// this.items.idCard = idCard
				// this.items.name = name
				// this.items.phone = phone
				// this.items.state = state
				// this.items.userMoney = userMoney
				// this.items.vip = vip
				
				this.dialogeditUser=true;
				this.items = row;
			},

		},
		created() {
			this.getLesson();
		}
	}
</script>
<style scoped>
	.button {
		margin-bottom: 15px;
	}

	.el-upload {
		border: 1px dashed #00ffff;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;

	}

	.el-upload:hover {
		border-color: #409EFF;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 178px;
		height: 178px;
		line-height: 178px;
		text-align: center;
	}

	.avatar {
		width: 178px;
		height: 178px;
		display: block;
	}
</style>
